<template>
  <div style="padding: 20px;overflow:hidden;">
    <div class="fl width60" id="bgImg">
      <img ref="middle" id="bgWidth" :src="promotionImg" width="640" height="1050">
      <p v-drag="getQrcode" draggable="true" ref="qrcode" class="qrcode" :style="{left:postForm.qrcodeX+'px',top:postForm.qrcodeY+'px'}">
        <img :src="mpQrcode"/>
      </p>
      <p v-drag="getText1" draggable="true" ref="text1" class="text1" id="Text_one" :style="{left:postForm.textX+'px',top:postForm.textY+'px'}">{{postForm.textContent}}</p>
      <p v-drag="getText2" draggable="true" ref="text2" class="text2" id="Text_three" :style="{left:postForm.textX3+'px',top:postForm.textY3+'px'}">{{postForm.text3Content}}</p>
    </div>
    <div class="fr width40">
      <h3>操作须知</h3>
      <code>
        <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
        备注：用户可以自行定义推广图片中二维码及文本的位置。将鼠标选中二维码或文本进行拖拽。拖至符合自身需求的区域即可。本功能中文本模块样式仅供参考，最后以前端显示为主。
      </code>
      <el-form class="form-container" :model="postForm" :rules="rules" v-loading="formLoading" ref="postForm" label-width="220px" label-position="right">
        <p>二维码在图片中的坐标</p>
        <el-form-item label="x：" prop="qrcodeX">
          <el-input v-model="postForm.qrcodeX" placeholder="x坐标" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="y：" prop="qrcodeY">
          <el-input v-model="postForm.qrcodeY" placeholder="y坐标" style="width: 100px"></el-input>
        </el-form-item>
        <!--<p>'我是XXX'在图片中的坐标</p>-->
        <el-form-item label-width="0px" label="" prop="textContent">
        	<el-col :span="14">
        	  <el-input :disabled="editDisabl" :maxlength="19" v-model="postForm.textContent" placeholder="请输入想在前端展示的文字"></el-input>
        	</el-col>

          <el-col :span="6">在图片中的坐标</el-col>
          <el-col :span="4">
            <el-checkbox v-model="postForm.enableTextContent" :true-label="1" :false-label="0">自定义</el-checkbox>
          </el-col>
        </el-form-item>
        <el-form-item label="x：" prop="textX">
          <el-input v-model="postForm.textX" placeholder="x坐标" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="y：" prop="textY">
          <el-input v-model="postForm.textY" placeholder="y坐标" style="width: 100px"></el-input>
        </el-form-item>
        <!--<p>'我为XX云讲师拓客系统代言'在图片中的坐标</p>-->
        <el-form-item label-width="0px" label="" prop="text3Content">
        	<el-col :span="14">
        	  <el-input :maxlength="19" :disabled="editDisabl3" v-model="postForm.text3Content" placeholder="请输入想在前端展示的文字"></el-input>
        	</el-col>
          <el-col :span="6">在图片中的坐标</el-col>
          <el-col :span="4">
            <el-checkbox v-model="postForm.enableText3Content" :true-label="1" :false-label="0">自定义</el-checkbox>
          </el-col>
        </el-form-item>
        <el-form-item label="x：" prop="textX3">
          <el-input v-model="postForm.textX3" placeholder="x坐标" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="y：" prop="textY3">
          <el-input v-model="postForm.textY3" placeholder="y坐标" style="width: 100px"></el-input>
        </el-form-item>
        <p style="padding: 10px 0;text-align:center;">
          <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">重置坐标</el-button>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getPreviewQrcodeSetting, savePreviewQrcodeSetting } from '@/api/systemManage'

const postForm = {
  qrcodeX: 200,
  qrcodeY: 579,
  textContent: '我是XXX',
  textX: 190,
  textY: 850,
  text3Content: '我为XXX代言',
  textX3: 140,
  textY3: 900,
  enableTextContent: 0,
  enableText3Content: 0
}

const validateNumber = (rule, value, callback) => {
  if (value && isNaN(value)) {
    callback('请输入正确的数值')
  } else {
    callback()
  }
}

const rules = {
  qrcodeX: [{ validator: validateNumber, trigger: 'blur' }],
  qrcodeY: [{ validator: validateNumber, trigger: 'blur' }],
  textX: [{ validator: validateNumber, trigger: 'blur' }],
  textY: [{ validator: validateNumber, trigger: 'blur' }],
  textX3: [{ validator: validateNumber, trigger: 'blur' }],
  textY3: [{ validator: validateNumber, trigger: 'blur' }],
  textContent: [{ min: 0, max: 19, message: '长度在 0 到 19 个字符', trigger: 'blur' }],
  text3Content: [{ min: 0, max: 19, message: '长度在 0 到 19 个字符', trigger: 'blur' }]
}

export default {
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      promotionImg: '../../../../../build/tuiguang.jpg',
      mpQrcode: '../../../../../build/exampleQrcode.png',
      formLoading: false,
      btnLoading: false,
      editDisabl: true,
      editDisabl3: true
    }
  },
  created() {
    this.initData()
  },
  watch: {
    'postForm.qrcodeX': function(v) {
      this.postForm.qrcodeX = v
    },
    'postForm.qrcodeY': function(v) {
      this.postForm.qrcodeY = v
    },
    'postForm.textX': function(v) {
      this.postForm.textX = v
    },
    'postForm.textY': function(v) {
      this.postForm.textY = v
    },
    'postForm.textX3': function(v) {
      this.postForm.textX3 = v
    },
    'postForm.textY3': function(v) {
      this.postForm.textY3 = v
    },
    'postForm.enableTextContent': function(val) {
      if (val == 1) {
        this.editDisabl = false
      } else {
        this.postForm.textContent = '我是XXX'
        this.editDisabl = true
      }
    },
    'postForm.enableText3Content': function(val) {
      if (val == 1) {
        this.editDisabl3 = false
      } else {
        this.postForm.text3Content = '我为XXX代言'
        this.editDisabl3 = true
      }
    }
  },
  methods: {
    initData() {
    	this.formLoading = true
      getPreviewQrcodeSetting().then(res => {
      	this.formLoading = false
        if (res.data.data) {
          this.postForm = res.data.data
          if (res.data.data.promotionImg) {
            this.promotionImg = res.data.data.promotionImg
          }
          if (res.data.data.mpQrcode) {
            this.mpQrcode = res.data.data.mpQrcode
          }
          if (res.data.data.textContent == '' || res.data.data.textContent == null) {
            this.postForm.textContent = '我是XXX'
            this.editDisabl = true
          }
          if (res.data.data.text3Content == '' || res.data.data.text3Content == null) {
            this.postForm.text3Content = '我为XXX代言'
            this.editDisabl3 = true
          }
        }
      }).catch(err => {
      	this.formLoading = false
        console.log(err)
      })
    },
    resetForm() {
      // this.$refs.postForm.resetFields()
      this.postForm.qrcodeX = 170;
      this.postForm.qrcodeY = 550;
      this.postForm.textX = 20;
      this.postForm.textY = 850;
      this.postForm.textX3 = 20;
      this.postForm.textY3 = 900;
      // this.initData()
    },
    submitForm() {
      console.log(this.postForm)
      this.$refs.postForm.validate(valid => {
        if (valid) {
          if (this.btnLoading) {
            return
          }
          this.btnLoading = true
          this.formLoading = true
          savePreviewQrcodeSetting(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
            this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
        } else {
          this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    },
    // 接受传来的位置数据，并将数据绑定给data下的val
    getQrcode(val) {
      this.postForm.qrcodeX = val.x
      this.postForm.qrcodeY = val.y
    },
    getText1(val) {
      this.postForm.textX = val.x
      this.postForm.textY = val.y
    },
    getText2(val) {
      this.postForm.textX3 = val.x
      this.postForm.textY3 = val.y
    }
  },
  directives: {
    drag: {
      bind(el, binding) {
        const currentElement = el // 当前元素
        const _this = this // 上下文
        currentElement.onmousedown = function(e) {
          // 鼠标按下，计算当前元素距离可视区的距离
          e.preventDefault ? e.preventDefault() : e.returnValue = false
          currentElement.style.cursor = 'move'

          const bgImg = document.getElementById('bgImg')
          const bgWidth = document.getElementById('bgWidth')
          const oWidth = currentElement.offsetWidth
          const oHeight = currentElement.offsetHeight

          const oEvent = e || event
          const disX = oEvent.clientX - currentElement.offsetLeft
          const disY = oEvent.clientY - currentElement.offsetTop

          bgImg.onmousemove = function(e) {
            // 通过事件委托，计算移动的距离

            const ev = e || event
            let l = ev.clientX - disX
            let t = ev.clientY - disY
            if (l < 20) {
              l = 20
            } else if (l > bgWidth.offsetWidth - oWidth - 20) {
              l = bgWidth.offsetWidth - oWidth - 20
            }

            if (t < 20) {
              t = 20
            } else if (t > bgWidth.offsetHeight - oHeight + 20) {
              t = bgWidth.offsetHeight - oHeight + 20
            }

            // 移动当前元素
            currentElement.style.left = l + 'px'
            currentElement.style.top = t + 'px'
            // 将此时的位置传出去
            binding.value({ x: l, y: t })
          }
          bgImg.onmouseup = function(e) {
            bgImg.onmousemove = null
            bgImg.onmousedown = null
          }
        }
      }
    }
  }
  /*
  mounted() {
    console.log(this.$refs.qrcode.style)
    this.$refs.qrcode.style.left = this.postForm.qrcodeX + 'px'
    this.$refs.qrcode.style.top = this.postForm.qrcodeY + 'px'
    this.$refs.text1.style.left = this.postForm.textX + 'px'
    this.$refs.text1.style.top = this.postForm.textY + 'px'
    this.$refs.text2.style.left = this.postForm.textX3 + 'px'
    this.$refs.text2.style.top = this.postForm.textY3 + 'px'
  }
  */
}
</script>
<style scoped>
.width60 {
  width: 60%;
  height: 1054px;
  position: relative;
}
/* .c-pa {
  position: absolute;
  left: 210px;
  top: 115px;
} */
.width40 {
  width: 40%;
}
.width60 p{
  position: absolute;
}
.qrcode {
  left: 196px;
  top: 579px;
  z-index: 100;
}
.qrcode img{
  width: 240px;
  height: 240px;
}
.text1 {
  left: 111px;
  top: 850px;
  font-size: 32px;
  border: 1px solid red;
  z-index: 100;
  white-space:nowrap;
  word-break: break-all;
  max-width: 600px;
}
.text2 {
  left: 111px;
  top: 900px;
  font-size: 32px;
  z-index: 100;
  border: 1px solid red;
  white-space:nowrap;
  word-break: break-all;
  max-width: 600px;
}
</style>


